<template>
	<div class="header">
		<div class="logo">
			<img src="/img/bigScreen/000.png" alt="" />
		</div>
		<div class="tab">
			<div class="tab_item" :class="{active:active==1}" @click="changeActive(1)">
				重大危险源
			</div>
			<div class="tab_item" :class="{active:active==2}" @click="changeActive(2)">
				安全风险分区
			</div>
			<div class="tab_item" :class="{active:active==3}" @click="changeActive(3)">
				人员在岗在位
			</div>
			<div class="tab_item" :class="{active:active==4}" @click="changeActive(4)">
				生产全流程
			</div>
		</div>
	</div>	
</template>

<script>
	export default {
		data() {
			return {
				active:1 // 头部导航切换
			}
		},
		methods: {
			changeActive(num){
				if(this.active==num){
					return false
				}else{
					this.active=num
				}
			},			
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		height: 100px;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10;
		display: flex;
		align-items: center;
		padding: 0 50px;
		justify-content: space-between;
		background: url('/img/bigScreen/002.png')repeat-x;
		background-size: contain;
		.logo {
			width: 350px;
			img {
				width: 100%;
			}
		}
		.tab {
			display: flex;
		}
		.tab_item {
			cursor: pointer;
			width: 196px;
			height: 43px;
			background: url('/img/bigScreen/001.png')no-repeat;
			background-size: 100% 100%;
			font-size: 18px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			margin-right: 30px;
		}
		.tab_item.active{
			background: url('/img/bigScreen/007.png')no-repeat;
			background-size: 100% 100%;
		}
		.tab_item:nth-last-child(1) {
			margin-right: 0;
		}
	}	
</style>